
//左侧饼图
var color=["#ff8700", "#93dd6e","#09a7e2","#fce24f","#b8ff2e","#09e24b","#00a9e1","#0046af","#360293","#560081","#af0058", "#09e2cb"];
var pieData=[
	{name:'个人',value:18003},
	{name:'基金会',value:56},
	{name:'律师执业机构',value:277},
	{name:'民办非企业单位',value:832},
	{name:'企业',value:159194},
	{name:'社会团体',value:2174},
	{name:'事业单位',value:2322},
	{name:'政府机关',value:947}
]
var legend=['个人','基金会','律师执业机构','民办非企业单位','企业','社会团体','事业单位','政府机关']

var pie3Opt = {
    color:color,
    backgroundColor: 'transparent',
    legend: {
        orient: 'horizontal',
        top: '73%',
        data:legend,
        show : false,
        textStyle:{
            color:'#fff'
        }
    },
    tooltip : {
        trigger: 'item',
        //formatter: "{a} <br/>{b} : {c} ({d}%)",
        formatter:function(param){
            if(param.name){
            	return  '<div>'+param.name+'</div>' +
		        '<div>'+param.value+'  ('+param.percent+'%)</div>'
            }
		},
        position:'right'
    },
    series: [{
        name: '',
        type: 'pie',
        radius: ['45%', '60%'],
        center: ['45%', '40%'],
        hoverAnimation: true,
        label: {
            normal: {
                show: false,
                position: 'center'
            },
            emphasis: {
                show: false,
                textStyle: {
                    fontSize: '30',
                    fontWeight: 'bold'
                }
            }
        },
        data: pieData
    },{
        name: '',
        type: 'pie',
        clockWise: true,
        hoverAnimation: false,
        animationType: 'scale',
        radius: [200, 200],
        center: ['45%', '40%'],
        label: {
            normal: {
                position: 'center'
            }
        },
        data: [{
            value: 0,
            label: {
                normal: {
                    formatter: '38',
                    textStyle: {
                        color: '#20fd07',
                        fontSize: 25,
                        fontWeight: 'bold'
                    }
                }
            }
        }, {
            tooltip: {
                show: false
            },
            label: {
                normal: {
                    formatter: '\n',
                    textStyle: {
                        color: '#bbeaf9',
                        fontSize: 12
                    }
                }
            }
        }]
    }]
};
var pie3Chart = echarts.init(document.getElementById('webPie'))
pie3Chart.setOption(pie3Opt)
window.addEventListener("resize", function () {
    pie3Chart.resize();
});

var pieIndex = 0
var pieAutoShow = function(){
    if (pieIndex >7){
        pieIndex = 0
    }
    for (var i = 0;i <8;i++){
        if (i != pieIndex){
            pie3Opt.series[0].data[i]['selected'] = false;
        }else{
            pie3Opt.series[0].data[i]['selected'] = true;
        }
    }
    //pie3Opt.series[1].data[0].label.normal.formatter = pie3Opt.series[0].data[pieIndex].value + ""
    //pie3Opt.series[1].data[0].label.normal.formatter=parseInt(Math.random()*99) + "%"
    pie3Opt.series[1].data[0].label.normal.formatter = (pie3Opt.series[0].data[pieIndex].value/allData(pieData)*100).toFixed(1) + "%"
    pie3Opt.series[1].data[1].label.normal.formatter = "" + pie3Opt.series[0].data[pieIndex].name
    pie3Chart.setOption(pie3Opt)
    pieIndex++
    setTimeout(pieAutoShow,1200)
}
pieAutoShow()

function allData(data){
	var allNum=0
	for(var a=0;a<data.length;a++){
		allNum+=data[a].value
	}
	return allNum
}

//左下饼图
var data1st=[
    {value:53531, name:'上海主体数'},
    {value:130323, name:'外省主体在本省接入数'},
]
var pieOpt={
    color : ["#00a9e1", "#ff8700","#0046af","#360293"],
    tooltip : {
        trigger: 'item',
        confine : true,//显示的位置调整
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        bottom:'bottom',
        textStyle:{
            color: 'rgba(255,255,255,0.8)'
        },
        orient: 'horizontal',
        data: ['上海主体数','外省主体在本省接入数']
    },
    series : [
        {
            name: '',
            type: 'pie',
            radius : '50%',
            center: ['45%', '40%'],
            data: [],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            label: {
                normal: {
                    show: false
                },
                emphasis: {
                    show: false
                }
            },
            lableLine: {
                normal: {
                    show: false
                },
                emphasis: {
                    show: false
                }
            },
        }
    ]
}
pieOpt.series[0].data=data1st;
var pie1Chart = echarts.init(document.getElementById('joinWebPie'));
pie1Chart.setOption(pieOpt);

//地图
var mapData=[
	{name:'宝山区',value:2880},
	{name:'奉贤区',value:3168},
	{name:'虹口区',value:1716},
	{name:'黄浦区',value:1841},
	{name:'嘉定区',value:4216},
	{name:'静安区',value:1648},
	{name:'闵行区',value:5037},
	{name:'浦东新区',value:8320},
	{name:'普陀区',value:2903},
	{name:'青浦区',value:2016},
	{name:'松江区',value:3773},
	{name:'徐汇区',value:3700},
	{name:'杨浦区',value:2056},
	{name:'闸北区',value:1327},
	{name:'长宁区',value:2221},
	{name:'金山区',value:2880},
	{name:'崇明县',value:653}
]

var geoCoordMap={}
var mapFeatures = echarts.getMap('上海').geoJson.features;
mapFeatures.forEach(function(v) {
    // 地区名称
    var name = v.properties.name;
    // 地区经纬度
    geoCoordMap[name] = v.properties.cp;
});

var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
            res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value)
            });
        }
    }
    return res;
};

var optionMap = {
		tooltip: {
			trigger: 'item',
			formatter:function(param){
				var province = param.name;
					return	'<div>'+param.name+'</div>' +
				        '<div>备案域名数量：'+param.data.value[2]+'</div>';
			}
		},
		geo: {
			show: true,
			zoom: 1.2,
			roam: false,
			map: '上海',
			itemStyle: {
				normal: {
					show: false,
					borderColor: '#285ac6',
					borderWidth: 1,
					areaColor: '#123082',
					shadowBlur: 3,
					shadowColor: '#081435',
					shadowOffsetX: -4,
					shadowOffsetY: 8
				},
				emphasis: {
					areaColor: '#fce24f',
					borderColor: '#fce24f'
				}
			}
		},
		series: [{
			type: 'map',
				zoom: 1.2,
				mapType: '上海',
				//		geoIndex: 0,
				roam: false,
				label: {
					normal: {
						show: false,
						textStyle: {
							color: '#fff'
						}
					},
					emphasis: {
						show: true,
						textStyle: {
							color: '#fff'
						}
					}
				},
				itemStyle: {
					normal: {
						show: false,
						borderColor: '#3770ea',
						borderWidth: 1,
						areaColor: '#0f2d87'
					},
					emphasis: {
						areaColor: '#2a56bd',
						borderColor: '#2a56bd',
						//				opacity: 0.8,
					}
				},
			data:convertData(mapData)
		},{
		 	name: 'Top 5',
      type: 'effectScatter',
      zlevel: 1,
      coordinateSystem: 'geo',
      symbolSize: function (val) {
          return val[2]/8320*20+5
      },
      showEffectOn: 'render',
      rippleEffect: {
          brushType: 'stroke'
      },
      hoverAnimation: true,
      label: {
          normal: {
//            formatter: '{b}',
		        position: 'right',
		        show: false
          }
      },
      itemStyle: {
          normal: {
              color: '#f4e925',
              shadowBlur: 10,
              shadowColor: '#333'
          }
      },
//    data: convertData(mapData)
			data:convertData(mapData.sort(function(a,b){
				return b.value-a.value
			}).slice(0,5))
		},{
		 	name: 'Top 5',
      type: 'scatter',
      zlevel: 1,
      coordinateSystem: 'geo',
      symbolSize: function (val) {
//        return val*4+8;
				return val[2]/8320*20+5
      },
      showEffectOn: 'render',
      rippleEffect: {
          brushType: 'stroke'
      },
      hoverAnimation: true,
      label: {
          normal: {
//            formatter: '{b}',
		        position: 'right',
		        show: false
          }
      },
      itemStyle: {
          normal: {
              color: '#f4e925',
              shadowBlur: 10,
              shadowColor: '#333'
          }
      },
//    data: convertData(mapData)
			data:convertData(mapData.sort(function (a, b) {
          return b.value - a.value;
      }).slice(5))
		}]
	};
var mapChart = echarts.init(document.getElementById('webChina'))
mapChart.setOption(optionMap)
window.addEventListener("resize", function () {
    mapChart.resize();
});

//右上柱图
var yData=['浦东新区','闵行区','嘉定区','松江区','徐汇区','奉贤区','普陀区','宝山区','长宁区','金山区']
var xData=[8320,5037,4216,3773,3700,3168,2903,2880,2221,2200]
barEvt(yData,xData,"webBar1")


var yData2=['广东','江苏','浙江','北京','山东','安徽','四川','福建','湖北','重庆']
var xData2=[24282,22120,17068,10482,5479,5032,4915,4457,3573,3347]
//barEvt2(yData2,xData2,"webBar2")
barEvt(yData2,xData2,"webBar2")
//tab定时切换
/*var index=0
function  autoShow(){
    for(var i=0;i<2;i++){
        if(index==i){
            $(".webBar li:eq("+index+")").click(function(){
                $(this).addClass("active").siblings().removeClass("active");
            })
            $(".webBar li:eq("+index+")").trigger("click");
        }
    }
    index++
    if (index > 1){
        index = 0
    }
}
window.setInterval(autoShow, 10000);*/

/*$(".webBar li").click(function(){
    $(this).addClass("active").siblings().removeClass("active")
    var index=$(this).index()
    if(index==1){
        $("#webBar2").show()
        $("#webBar1").hide()
        var yData2=['moji.com','sogou.com','360.cn','iqiyi.com','tianyaui.com','china.com','offcn.com','qq.com','12306.cn','baidu.com']
        var xData2=[16.89,20.17,23.19,77.49,111.33,146.03,153.35,154.92,309.05,444.34]
        barEvt2(yData2,xData2,"webBar2")
    }
    if(index==0){
        $("#webBar1").show()
        $("#webBar2").hide()
        var yData=['广东','四川','上海','北京','福建','山东','浙江','江苏','天津','湖北']
        var xData=[564155,358594,324766,294848,265161,220714,136610,121998,121130,79642]
        barEvt(yData1,xData1,"webBar1")
    }
})*/

function barEvt(yData,xData,ele){
    var max=0
    for (var i=0;i<xData.length;i++){
        if (xData[i] > max) {
            max = xData[i]+200;
        }
    }
    var allData=[max, max, max, max, max, max, max, max]
    var barOption = {
        animation: false,
        tooltip: {
            trigger: 'axis',
            formatter: '{a}<br />{b} : {c}',
            axisPointer: {
                type: 'shadow',
            },
            backgroundColor: 'rgba(9,89,124,0.8)',
            borderWidth: 1,
            borderColor: 'rgba(6,214,224,0.5)',
            textStyle: {
                color: '#4ff2f4'
            }
        },
        grid: {
            left:60,
            top: 30,
            right:30
        },
        xAxis: {
            type: 'category',
            splitLine:{    //grid区域分隔线
                show:false,
                lineStyle: {
                    width:1,
                    type:"solid",
                    color:"#2a3f7e"
                }
            },
            axisLabel: {  //坐标轴标签
                show: true,
                textStyle: {
                    color: '#c0d4da'
                },
                interval:false,
                rotate : 25,
            },
            axisTick: {
                show: true,   //刻度线
                color:"#c0d4da"
            },
            axisLine:{
                show: true,   //坐标轴轴线
                lineStyle: {
                    width:1,
                    color:"#c0d4da"
                }
            },
            data: yData
        },
        yAxis : {
        	//name : '单位/万',
            splitLine:{    //grid区域分隔线
                show:true,
                lineStyle: {
                    width:1,
                    type:"solid",
                    color:"#2a3f7e"
                }
            },
            axisTick: {
                show: true,   //刻度线
                color:'#c0d4da'
            },
            axisLine: {
                show: true ,  //坐标轴轴线
                lineStyle: {
                    width:1,
                    color:"#c0d4da"
                }
            },
            axisLabel: {  //坐标轴标签
                show: true
            },
        },
        series: [
//				{
//          name: '外侧',
//          type: 'bar',
//          barGap: '-100%',
//          itemStyle: {
//              normal: {
//                  color: '#1d3fa1',
//                 // borderWidth: 1,
//                  barBorderRadius:35,
//               //   borderColor: '#0ea4e3'
//              }
//          },
//          data: allData
//      }, 
					{
            name: '网站数量',
            type: 'bar',
            barGap: '-100%',
            barCategoryGap:'70%',
            data: xData,
            itemStyle: {
                normal: {
                    color: '#0ea4e3',
//                  barBorderRadius:35,
                }
            },
        }]
    };
    var barChart = echarts.init(document.getElementById(ele))
    barChart.setOption(barOption);
    window.addEventListener("resize", function () {
        barChart.resize();
    });
}
function barEvt2(yData,xData,ele){
    console.log(yData,xData)
    var max=0
    for (var i=0;i<xData.length;i++){
        if (xData[i] > max) {
            max = xData[i]+200;
        }
    }
    var allData=[max, max, max, max, max, max, max, max]
    var barOption = {
        animation: false,
        tooltip: {
            trigger: 'axis',
            formatter: '{a}<br />{b} : {c}',
            axisPointer: {
                type: 'shadow',
            },
            backgroundColor: 'rgba(9,89,124,0.8)',
            borderWidth: 1,
            borderColor: 'rgba(6,214,224,0.5)',
            textStyle: {
                color: '#4ff2f4'
            }
        },
        grid: {
            left:110,
            top: 20,
            right:60
        },
        yAxis: {
            type: 'category',
            splitLine:{    //grid区域分隔线
                show:false,
                lineStyle: {
                    width:1,
                    type:"solid",
                    color:"#272858"
                }
            },
            axisLabel: {  //坐标轴标签
                show: true,
                textStyle: {
                    color: 'c0d4da'
                },
                interval:false,
               // rotate : 15,
            },
            axisTick: {
                show: true   //刻度线
            },
            axisLine:{
                show: true,   //坐标轴轴线
                lineStyle: {
                    width:1,
                    color:"#c0d4da"
                }
            },
            data: yData
        },
        xAxis : {
            splitLine:{    //grid区域分隔线
                show:true,
                lineStyle: {
                    width:1,
                    type:"solid",
                    color:"#2a3f7e"
                }
            },
            //name : '单位/亿',
            axisTick: {
                show: true   //刻度线
            },
            axisLine: {
                show: true ,  //坐标轴轴线
                lineStyle: {
                    width:1,
                    color:"#c0d4da"
                }
            },
            axisLabel: {  //坐标轴标签
                show: true,
                color:'#c0d4da'
            },
        },
        series: [
//      {
//          name: '外侧',
//          type: 'bar',
//          barGap: '-100%',
//          itemStyle: {
//              normal: {
//                  color: '#1d3fa1',
//                  // borderWidth: 1,
//                  barBorderRadius:35,
//                  //   borderColor: '#0ea4e3'
//              }
//          },
//          data: allData
//      }, 
        {
            name: '网站访问量',
            type: 'bar',
            barGap: '-100%',
            barCategoryGap:'60%',
            data: xData,
            itemStyle: {
                normal: {
                    color: '#0ea4e3',
//                  barBorderRadius:35,
                }
            },
        }]
    };
    var barChart = echarts.init(document.getElementById(ele))
    barChart.setOption(barOption);
    window.addEventListener("resize", function () {
        barChart.resize();
    });
}


//右下折线图
var timeData= ['2017-01','2017-02','2017-03','2017-04','2017-05','2017-06','2017-07','2017-08','2017-09','2017-10','2017-11','2017-12','2018-01','2018-02']
var data1=[1257989,2649708,2910654,3181202,3276117,2530822,2866354,2882436,2861511,3040594,3062031,3428909,3528909,4519000]
var lineOption = {
    tooltip : {
        trigger: 'axis',
    },
    grid: {
        top:30,
        left: '0%',
        right: '10%',
        bottom: 30,
        containLabel: true
    },
    xAxis: {
        boundaryGap : false,
        type: 'category',
        splitLine:{    //grid区域分隔线
            show:false,
            lineStyle: {
                width:1,
                type:"solid",
                color:"#2a3f7e"
            }
        },
        axisLabel: {  //坐标轴标签
            show: true,
            textStyle: {
                color: '#0d7790'
            }
        },
        axisTick: {
            show: false   //刻度线
        },
        axisLine:{
            show: false,   //坐标轴轴线
            lineStyle: {
                width:1,
                color:"#fff"
            }
        },
        data : timeData
    },
    yAxis : {
        splitLine:{    //grid区域分隔线
            show:true,
            lineStyle: {
                width:1,
                type:"solid",
                color:"#2a3f7e"
            }
        },
        axisTick: {
            show: false   //刻度线
        },
        axisLine: {
            show: false ,  //坐标轴轴线
            lineStyle: {
                width:1,
                color:"#fff"
            }
        },
        axisLabel: {  //坐标轴标签
            show: true
        },
    },
    series : [
        {
            name:'网站数量',
            type:'line',
            symbol:'none',  //这句就是去掉点的
            smooth:true,  //这句就是让曲线变平滑的
            stack: '总量',
            itemStyle: { normal: {
                color:'#1de5f2',
            }},
            lineStyle: { normal: {
                color:'#1de5f2',
            }},
            areaStyle: {
                normal: {
                    color:'#1de5f2',
                    opacity: 0.2
                }
            },
            data:data1
        }
    ]
};
var lineChart = echarts.init(document.getElementById('webLine'))
lineChart.setOption(lineOption);
window.addEventListener("resize", function () {
    lineChart.resize();
});




